<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="pane-account">
    <el-form :model="account" label-width="60px" size="large" :rules="rules" status-icon ref="accountPaneRef">
      <el-form-item label="账号" prop="username">
        <el-input v-model="account.username" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="account.password" show-password auto-complete="off" placeholder="请输入密码" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import type { FormRules, ElForm } from 'element-plus'
import { reactive, ref } from 'vue'
import useLoginStore from '@/store/login'

const loginStore = useLoginStore()

const account = reactive({
  username: '',
  password: '',
})

const rules = reactive<FormRules>({
  username: [{ required: true, message: '请输入账户', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})

// 执行登录操作
const accountPaneRef = ref<InstanceType<typeof ElForm>>()
function loginAction() {
  console.log('用户在进行账号登录', account.username, account.password)

  accountPaneRef.value?.validate(async (valid) => {
    if (!valid) {
      ElMessage.error('Oops, 请您输入正确的格式后再登录')
      return
    }

    // 验证通过 提交
    const username = account.username
    const password = account.password

    await loginStore.accountLoginActionAsync({ username, password })
  })
}

defineExpose({
  loginAction,
})
</script>

<style lang="less" scoped></style>
